---
sidebar_position: 1
---

# scrollTo

`scrollTo` lets you synchronously scroll to a given X or Y offset.

## Reference

```tsx
import { scrollTo } from 'react-native-reanimated';

function App() {
  const animatedRef = useAnimatedRef();
  const scrollY = useSharedValue(0);

  useDerivedValue(() => {
    // highlight-next-line
    scrollTo(animatedRef, 0, scrollY.value, true);
  });

  return (
    <Animated.ScrollView ref={animatedRef}>{/* ... */}</Animated.ScrollView>
  );
}
```

<details>
<summary>Type definitions</summary>

```typescript
function scrollTo<T extends Component>(
  animatedRef: AnimatedRef<T>,
  x: number,
  y: number,
  animated: boolean
): void;
```

</details>

### Arguments

#### `animatedRef`

An [animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView (or other scrollable) component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component.

#### `x`

Value in pixels to scroll to on the horizontal X axis.

#### `y`

Value in pixels to scroll to on the vertical Y axis.

#### `animated`

Whether the scroll should be smooth (`true`) or instant (`false`).

### Returns

`scrollTo` returns `undefined`.

## Example

import ScrollTo from '@site/src/examples/ScrollTo';
import ScrollToSrc from '!!raw-loader!@site/src/examples/ScrollTo';

<InteractiveExample src={ScrollToSrc} component={ScrollTo} />

## Remarks

- The `scrollTo` function can only be called from [the UI thread](/docs/fundamentals/glossary#ui-thread).
- Supports `Animated.FlatList`.
- Usually works with other ScrollView-like and FlatList-like components if they use a `ScrollView` under the hood and are [made animated](/docs/core/createAnimatedComponent#reference).
- Scrollable components must implement `getScrollableNode` method (and `getNativeScrollRef` method for the New Architecture) to be compatible with `scrollTo`.

## Platform compatibility

<PlatformCompatibility android ios web />
